﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Cloud Samurai Web Administration</title>
    <link rel="stylesheet" type="text/css" href="/AdminSite/CSS/StyleSheet.css" />
    <script type="text/javascript" src="/AdminSite/Scripts/jquery-1.4.1.js"></script>
    <script type="text/javascript">
        // initiate page, define click events
        $(document).ready(function initPage() {
            //define tab click method
            $("#tab_home").click(function () {
                fillTenantDepTbl();
                switchTab($('#tab_home'));
            });
            $("#tab_application").click(function () {
                switchTab($('#tab_application'));
            });
            $("#tab_newTenant").click(function () {
                fillApplicationList();
                switchTab($('#tab_newTenant'));
            });
            $("#tab_health").click(function () {
                refreshRoleInstances();
                switchTab($('#tab_health'));
            });
            $("#tab_test").click(function () {
                switchTab($('#tab_test'));
            });
            $("#tab_home").click();
            //define other button events
            $('#input_newTenSub').click(submitNewTenant);
            $('#input_test').click(submitTest);
        });

        // switch tab
        function switchTab(activeTab) {
            var theId = activeTab.attr('id');  // tab_home
            $("li.tab_item").each(function (index, ele) {
                if (ele.id == theId) $(ele).addClass('active');
                else $(ele).removeClass("active");
            });
            theId = theId.substring(theId.indexOf('_'), theId.length); // tab_home -> panel_home
            theId = "panel" + theId;
            $("div.tab_item").each(function (index, ele) {
                if (ele.id == theId) ele.style.display = 'block';
                else ele.style.display = 'none';
            });
        }

        // defualt Rest call handler
        function callRestError_callback(jqXHR, status) {
            alert('Call Rest service error: ' + status);
        }

        function callRestSuccess_callback(data, status, jqXHR) {
            alert('Call Rest service success: ' + status + data);
        }

        // fill tenant deployment table
        function fillTenantDepTbl() {
            $.ajax({
                cache: false,
                url: '/AdminSite/AdminService.svc/GetTenantDeployment',
                dataType: 'json',
                success: fillTenantDepTbl_callback,
                error: callRestError_callback
            });
        }

        function fillTenantDepTbl_callback(data) {
            data = JSON.parse(data);
            while (table_tenantDly.rows.length > 0) {
                table_tenantDly.deleteRow(0);
            }
            var tr, td;
            for (var i = 0; i < data.length; i++) {
                tr = table_tenantDly.appendChild(document.createElement('tr'));

                td = tr.appendChild(document.createElement('td'));
                td.innerHTML = data[i].TenantId;
                td = tr.appendChild(document.createElement('td'));
                td.innerHTML = "<a href=\"http://" + data[i].HostName + "\">" + data[i].HostName + "</a>";

                td = tr.appendChild(document.createElement('td'));
                td.innerHTML = data[i].Instance;
                td = tr.appendChild(document.createElement('td'));
                td.innerHTML = data[i].InstanceId;
                td = tr.appendChild(document.createElement('td'));
                td.innerHTML = data[i].Status;

                td = tr.appendChild(document.createElement('td'));
                td.innerHTML = data[i].Application;
                td = tr.appendChild(document.createElement('td'));
                td.innerHTML = data[i].AppCustom;

                td = tr.appendChild(document.createElement('td'));
                td.innerHTML = data[i].Staging;
                td = tr.appendChild(document.createElement('td'));
                td.innerHTML = data[i].SStatus;

                td = tr.appendChild(document.createElement('td'));
                var ts = data[i].Timestamp;
                ts = ts.substring(ts.indexOf('(') + 1, ts.lastIndexOf(')'));
                td.innerHTML = (new Date(parseInt(ts))).toString();

                td = tr.appendChild(document.createElement('td'));
                td.innerHTML = "<a href=javascript:removeTenant(\"" + data[i].TenantId + "\")> Delete</a>";
            }
        }

        // fill application list
        function fillApplicationList() {
            while (input_application.length > 0) {
                input_application.remove(0);
            }
            $.ajax({
                cache: false,
                url: '/AdminSite/AdminService.svc/GetApplications',
                dataType: 'json',
                success: function (data) {
                    data = JSON.parse(data);
                    var option;
                    for (var i = 0; i < data.length; i++) {
                        //<option value="myapp1.1.zip">myapp1.1.zip</option>
                        option = input_application.appendChild(document.createElement('option'));
                        option.value = data[i];
                        option.innerHTML = data[i];
                    }
                },
                error: callRestError_callback
            });
        }

        // submit new tenant
        function submitNewTenant() {
            // /AdminService.svc/CreateTenant/tenantId/Trent/app/site1.3.zip
            var _url = 
                '/AdminSite/AdminService.svc/CreateTenant/tenantId='
                + input_tenantId.value.trim()
                + '/app='
                + input_application.value;
            $.ajax({
                cache: false,
                url: _url,
                dataType: 'json',
                success: callRestSuccess_callback,
                error: callRestError_callback
            });
        }

        // submit new tenant
        function submitTest() {
            var _url =
                '/AdminSite/AdminService.svc/Test/msg='
                + input_msg.value.trim();
            $.ajax({
                cache: false,
                url: _url,
                dataType: 'json',
                success: callRestSuccess_callback,
                error: callRestError_callback
            });
        }

        // remove tenant
        function removeTenant(tenantId) {
            var _url =
                '/AdminSite/AdminService.svc/RemoveTenant/tenantId='
                + tenantId;
            $.ajax({
                cache: false,
                url: _url,
                dataType: 'json',
                success: callRestSuccess_callback,
                error: callRestError_callback
            });
        }

    </script>
</head>
<body>
    <div id="main">
        <div id="header">
            <div id="logo">
                <img src="/AdminSite/images/samurai-logo.jpg" alt="Cloud Samurai" /></div>
            <div id="header-text">
                Administrator<br />
                Cloud Samurai - V1.0</div>
        </div>
        <div class="clear">
        </div>
        <div id="content">
            <ul class="tab">
                <li id="tab_home" class="tab_item"><a><span>Home</span></a></li>
                <li id="tab_application" class="tab_item "><a><span>Application</span></a></li>
                <li id="tab_newTenant" class="tab_item "><a><span>New Tenant</span></a></li>
                <li id="tab_health" class="tab_item "><a><span>Health</span></a></li>
                <li id="tab_test" class="tab_item "><a><span>Test</span></a></li>
            </ul>
            <div id="panel_home" class="tab_item ">
                <h2>
                    Tenant Deployment</h2>
                <table border="1" cellpadding="5" cellspacing="0">
                    <thead>
                        <tr>
                            <th>
                                Tenant
                            </th>
                            <th>
                                Host Name
                            </th>
                            <th>
                                Instance
                            </th>
                            <th>
                                Instance Id
                            </th>
                            <th>
                                Status
                            </th>
                            <th>
                                Application
                            </th>
                            <th>
                                AppCustom
                            </th>
                            <th>
                                Staging
                            </th>
                            <th>
                                SStatus
                            </th>
                            <th>
                                Changed
                            </th>
                            <th>
                                Edit
                            </th>
                        </tr>
                    </thead>
                    <tbody id="table_tenantDly">
                    </tbody>
                </table>
            </div>
            <div id="panel_application" class="tab_item ">
                <h2>
                    Application</h2>
                <div class="editor-label"> Upload/Download appliation zip file. TBD. </div>
            </div>
            <div id="panel_newTenant" class="tab_item ">
                <h2>
                    Create New Tenant</h2>
                <div>
                    <div>
                        <div class="editor-label">
                            TenantId
                        </div>
                        <div class="editor-field">
                            <input name="input_tenantId" id="input_tenantId" type="text" value="" />
                        </div>
                        <div class="editor-label">
                            Application
                        </div>
                        <div class="editor-field">
                            <select name="input_application" id="input_application">
                            </select>
                        </div>
                        <div class="editor-label">
                            Customization
                        </div>
                        <div class="editor-field">
                            <input name="input_file" id="input_file" type="file" />
                        </div>
                    </div>
                    <p>
                        <input type="submit" value="Provision" id="input_newTenSub" />
                    </p>
                    <div class="editor-label"> 
                        Notes: <br /><br />
                        <b>TenantId</b> - for example, company1, test1.<br /><br />
                        <b>Application</b> - Choose from the list of Web Applications, used to provision the tenant.<br /><br />
                        <b>Customization</b> - Upload the custom code of this tenant, used to provision the tenant. (Not implemented yet.)<br /><br />
                    </div>
                </div>
            </div>
            <div id="panel_health" class="tab_item ">
                <h2>
                    Health Status</h2>
                <script language="javascript" type="text/javascript">
                    function refreshRoleInstances() {
                        var d = new Date();
                        $.ajax({
                            cache: false,
                            url: '/AdminSite/AdminService.svc/GetInstanceStatus',
                            dataType: 'json',
                            success: refreshRoleInstance_callback,
                            error: callRestError_callback
                        });

                    }

                    function refreshRoleInstance_callback(roleInstances) {
                        //Refresh the ARR Instances with changes

                        roleInstances = JSON.parse(roleInstances);

                        //alert(roleInstances.ArrInstances[0].Title);
                        $('#arrList').empty();
                        $.each(roleInstances.ArrInstances, function (count, instance) {
                            $('#arrList').append(template(instance));
                        });

                        //TODO:At the moment we are clearing and replacing when we should actually merge
                        $('#appHostList').empty();
                        $.each(roleInstances.AppHostInstances, function (count, instance) {
                            $('#appHostList').append(template(instance));
                        });

                        setTimeout(refreshRoleInstances, 10000);
                        //Refresh AppHost Instance with changes
                    }

                    function template(roleInstance) {
                        var tableSection = $('#template-table-section').clone();

                        //Set the header section title and status
                        tableSection.find('.header-text').text(roleInstance.Title);

                        //Append list details (Displays list of tenants in an AppHost)
                        var itemList = tableSection.find('.table-data');
                        $.each(roleInstance.Items, function (count, item) {
                            itemList.append('<li>' + item.Text + '</li>');
                        });

                        //Make it visible
                        tableSection.show();

                        return tableSection;
                    }
    
    
                </script>
                <!-- JQUERY TEMPLATE -->
                <div id="template-table-section" class="table-section" style="display: none">
                    <div class="table-header">
                        <div class="status-1">
                        </div>
                        <span class="header-text">Bowlus.FrontEnd_IN_0</span>
                    </div>
                    <ul class="table-data">
                    </ul>
                </div>
                <!-- END JQUERY TEMPLATE -->
                <div id="arrList" class="table-center">
                    <!--Table Status -->
                </div>
                <div class="hr">
                </div>
                <div id="appHostList" class="table-center">
                    <!--Table Status -->
                </div>
            </div>
            <div id="panel_test" class="tab_item ">
                <h2>
                    Test Page</h2>
                <div class="editor-label"> This page is used to do test. </div>
                <br />
                <div class="editor-label"> Test Message </div>
                <div class="editor-field">
                   <input name="input_msg" id="input_msg" type="text" value="" />
                </div>
                <p>
                   <input type="submit" value="CallTest" id="input_test" />
                </p>
                <div class="editor-label"> Usable test messages: <br /><br />
                <b>Rebalance</b> - trigger rebalance. It will calculate rebalance, and will do actual rebalance only if there is a deployment change as decided by the rebalance algorithm. Normally rebalance will be triggered by AppHost deployment change.<br />
                <br />
                <b>AppHostSync</b> - request AppHost to synchronize with TenantDeployment table, i.e. to check and to provision/deprovision sites. If there is actual deployment change, AppHost will inturn request FrontEnd to sync. Normally AppHostSync will be triggered by rebalance and add/remove Tenant actions. Even if not requested, AppHostSync will run every 2 minutes. </div>
            </div>
        </div>
        <div class="clear">
        </div>
        <div id="footer">
        </div>
    </div>
</body>
</html>
